<template>
	<view v-if="!loading">
		<navbar></navbar>
		<view class="container b-f">
			<view class="form-item-wrapper">
				<view class="form-item dis-flex flex-y-center">
					<view class="form-item-icon dis-flex flex-center">
						<text class="dy-iconfont icon-mima col-9 f-30"></text>
					</view>
					<input v-if="showPwd" class="flex-box" v-model="pwd" type="number" maxlength="6"
						placeholder="支付密码(请输入6位数字)" placeholder-class="col-9" />
					<input v-else class="flex-box" v-model="pwd" type="password" maxlength="6"
						placeholder="支付密码(请输入6位数字)" placeholder-class="col-9" />
					<view class="pwd-eye dis-flex flex-center" @click="changePwdVisible('showPwd')">
						<text class="dy-iconfont" :class="[{'icon-show':showPwd},{'icon-hide':!showPwd}]"></text>
					</view>
				</view>
				<view class="form-item dis-flex flex-y-center">
					<view class="form-item-icon dis-flex flex-center">
						<text class="dy-iconfont icon-shouji col-9 f-34"></text>
					</view>
					<view class="col-9">{{ mobile }}</view>
				</view>
				<view class="form-item dis-flex flex-y-center">
					<view class="form-item-icon dis-flex flex-center">
						<text class="dy-iconfont icon-shouquan col-9 f-34"></text>
					</view>
					<input class="flex-box" v-model="validate" placeholder="请输入验证码" maxlength="6"
						placeholder-class="col-9" />
					<send-code :mobile="mobile" codeBtnStyle="transparent" :smsType="3" ref="sendCode"
						@checkphone="checkPhone">
					</send-code>
				</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<button class="btn btn-normal" @click="onSetPassword" :disabled="btnDisabled">确定</button>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		isPhone,
		isPwd,
		isPositiveInteger,
		isWeixin
	} from "@/utils/verify.js"

	export default {
		data() {
			return {
				loading: true,
				showPwd: false, //密码是否明文
				showConfirmPwd: false, //确认密码是否明文

				mobile: '',
				pay_password: 0, // 0，设置密码，1：修改密码
				validate: '',
				pwd: '',
				confirmPwd: '',
			}
		},
		onLoad() {
			this.requestData();
		},
		computed: {
			btnDisabled: function() {
				return (0 == this.pwd.length || 0 == this.validate.length || this.loading);
			}
		},
		methods: {
			requestData: function() {
				this.loading = true;
				app._get('user/userPayPassword', null, (res) => {
					this.mobile = res.data.phone;
					this.pay_password = res.data.pay_password;
					this.loading = false;
					uni.setNavigationBarTitle({
						title: 0 == this.pay_password ? '设置安全密码' : '修改安全密码'
					});
				});
			},
			changePwdVisible(name) {
				this[name] = !this[name];
			},
			// 点击发送验证码，前校验手机号
			checkPhone() {
				if (!isPhone(this.mobile)) {
					app.showToast('手机号格式不正确');
					return;
				}
				console.log(this.$refs)
				console.log(this.$refs.sendCode.checkPhoneOk)
				this.$refs.sendCode.checkPhoneOk();
			},
			// 设置密码
			onSetPassword: function() {
				this.loading = true;
				app._post_form('user/setPayPassword', {
					phone: this.mobile,
					smscode: this.validate,
					pay_password: this.pwd
				}, (res) => {
					if (1 == res.code) {
						app.showSuccess(res.data, () => {
							uni.navigateBack();
						});
					}
				}, null, () => {
					this.loading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 25rpx;
		padding: 80rpx 30rpx;
	}

	.form-item-icon {
		width: 76rpx;
	}

	.form-item {
		height: 84rpx;
		background: #F9F9F9;
		border-radius: 6rpx;
	}

	.form-item:nth-child(n+2) {
		margin-top: 30rpx;
	}

	.form-item input {
		font-size: 28rpx;
	}

	.pwd-eye {
		width: 80rpx;
		height: 100%;
	}

	.btn-wrapper {
		margin-top: 180rpx;
		padding: 30rpx;
	}

	.btn-wrapper .btn {
		height: 100rpx;
		background: linear-gradient(270deg,#1a1a1a,#666);
		border-radius: 15rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}

	.btn-wrapper .btn[disabled] {
		opacity: 0.5;
	}
</style>
